<template>
  <view class="page-container">
    <!-- 搜索组件 -->
    <nav-bar @load="handleLoadNav">
      <view class="uni-easyinput-head">
        <uni-easyinput prefixIcon="search" disableColor="#fff" placeholder="请输入内容" @confirm="handleGoodsQuery" @input="handleGoodsQuery"
          @clear="handleClear">
        </uni-easyinput>
      </view>
    </nav-bar>
    <tabs-component :data="navList" :active="active" @change="handleNavChange"></tabs-component>
    <view class="content" :style="{ height: contentHeight + 'px' }">
      <custom-scroll-view :scrollHeight="contentHeight" :loadData="handleLoadData" ref="listRef" emptyText="暂无商品">
        <template v-slot="{data}">

          <view class="goods-box">
            <view v-for="item in data.data" class="goods-item" :key="item.goodsId">
              <goods-item pattern="all" :data="item" @giveDelGoods="(id,type)=>{takeDelGoods(id,type)}" @giveDownGoods="(id,type)=>{
            			takeDownGoods(id,type)
            		}" @giveUpGoods="(id,type)=>{takeUpGoods(id,type)}">
              </goods-item>
            </view>
          </view>
        </template>
      </custom-scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    getMyGoodsApi,
    getQueryAllGoodsApi,
    getQuerySaleGoodsApi,
    getQueryDownGoodsApi,
    deleteGoodsApi,
    putUpGoodsApi,
    putDownGoodsApi
  } from "@/api/my/goods.js"

  export default {
    data() {
      return {
        navList: [ // 导航栏
          {
            text: "全部物品",
            id: '2'
          }, {
            text: "在售物品",
            id: '1'
          }, {
            text: "下架物品",
            id: '0'
          },
        ],
        query: '',
        active: 0, // 导航栏选中项
        contentHeight: 0, // 下拉内容框高度
        moveDistance: 0, // 当前产生的距离
        moveX: 0, // 拖拽时候的X点
        startX: 0, // 初始位置的X点
        moreGoodsId: null, // 当前显示更多的商品id
        isMoreState: false, // 当前是否显示更多商品
      };
    },
    onLoad() {
      this.$nextTick(() => {
        this.handleNavChange(0);
      })
    },
    methods: {
      handleLoadNav({
        navHeight,
        height
      }) {
        this.contentHeight = height - navHeight;
      },
      // 输入清空操作
      handleClear() {
        this.query = "";
        this.$refs.listRef.handleRefresher();
      },
      //导航栏点击切换
      handleNavChange(index) {
        this.active = index
        this.$refs.listRef.handleRefresherLoad();
      },
      handleGoodsQuery(query) {
        this.query = query;
        this.handleNavChange(this.active);
      },
      // 加载数据
      async handleLoadData(page) {
        let type = this.navList[this.active].id;
        let {
          data: res
        } = await getMyGoodsApi(type, page, this.query);
        let data = {
          data: res.success ? res.data.goods.records : [],
          pages: res.success ? res.data.goods.pages : 0,
          success: res.success
        };
        return data;
      },
      // 删除商品
      async takeDelGoods(id, type) {
        const {
          data: result
        } = await deleteGoodsApi(id)
        if (result.code === 200) {
          uni.showToast({
            title: "删除成功",
            icon: "none"
          })
          this.handleNavChange(this.active);

        } else {
          uni.showToast({
            title: "删除失败",
            icon: "error"
          })
        }
      },
      // 下架商品 TODO 可以在优化
      async takeDownGoods(id, typem) {
        const {
          data: result
        } = await putDownGoodsApi(id)
        if (result.code === 200) {
          uni.showToast({
            title: "已下架",
            icon: "none"
          })
          this.handleNavChange(this.active)
        } else {
          uni.showToast({
            title: "操作失败",
            icon: "error"
          })
        }
      },
      // 上架商品
      async takeUpGoods(id, type) {
        const {
          data: result
        } = await putUpGoodsApi(id)
        if (result.code === 200) {
          uni.showToast({
            title: "已上架",
            icon: "none"
          })
          this.handleNavChange(this.active)
        } else {
          uni.showToast({
            title: "操作失败",
            icon: "error"
          })
        }
      },

    }
  }
</script>

<style lang="scss" scoped>
  .page-container {
    width: 100%;
    background: #eef2f4;

    .goods-box {
      padding: 32rpx;
      box-sizing: border-box;

      .goods-item {
        margin-bottom: 32rpx;
      }
    }
  }
</style>